<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/abchat.css">
</head>
<body class="room">
<div class="container">
    <div>
        <h3 class="form-signin-heading">ABChat | 聊天室</h3>
        <div class="panel panel-default">
            <div class="panel-body border">
                <div class="message-show pre-scrollable">
                </div>
                <div class="message-edit">
                    <div class="message-up">
                        <a>字体</a>
                        <a>字号</a>
                        <a>颜色</a>
                        <a>表情</a>
                        <a>聊天背景</a>
                    </div>
                    <div class="message-middle">
                        <textarea class="textarea"></textarea>
                    </div>
                    <!--用户名-->
                    <input type="text" name="username"/>
                    <div class="message-down text-right">
                        <button class="btn btn-info js-btn-send">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../static/js/jquery-3.2.1.js"></script>
<script src="../static/js/bootstrap.js"></script>
<script src="../static/js/abchat.js"></script>
<script src="../static/js/http.js"></script>
<script src="../static/js/socket.io.js"></script>
<script src="../static/js/socket.js"></script>
<script>
    var socket = null;
    // 当前用户名
    var currentUsername = "";
    $(function () {
        //连接socket
        socket = io.connect(chatURL);
        socketHandler(socket,function(){
            //连接时
            showSysMessage("已连接到服务器");
        },function (data) {
            showMessage({
                "isMyself" : data.username == currentUsername ? true : false,
                "nickname" : data.nickname,
                "headimage" : data.headimage,
                "date" : formatDate(data.date),
                "content": data.content
            });

        },function () {
            //断开时
            showSysMessage("已与服务器断开连接，正在尝试重新连接...");
        })
    })
    $('.js-btn-send').on('click',function () {
        sendMessage();
    });

    $('.textarea').on('keydown', function(e) {
        if(e.keyCode == 13 && (e.metaKey || e.ctrlKey)) {
            sendMessage();
        }
    })
    
    function sendMessage() {
        //用户名
        currentUsername = $('input[name=username]').val();
        //获取聊天框内容
        var content = $('.message-middle .textarea').val();
        if (content.trim() == ""){
            return false;
        }
        //清空聊天框内容
        $('.message-middle .textarea').val("");
        // 进行socket发送请求
        var data = {
            "username" : currentUsername,
            "nickname" : currentUsername,
            "headimage" : "../static/image/head.jpg",
            "content" : content,
            "date" : null
        }
        socketSend(socket,data);
    }


    function showMessage(data) {
        $('.message-show').append(messageTPL);
        var $message = $('.message-item').last();
        var $item = $($message.find(!data.isMyself ? '.item-left' : '.item-right'));
        $item.html(userTPL);
        $($message.find('.nick-name')).text(data.nickname);
        $($message.find('.image-head')).attr('src',data.headimage);
        $($message.find('.date')).text(data.date);
        $($message.find('.ct-label')).text(data.content);
        //滚动条跳到最后;
        $('.message-show').scrollTop( $('.message-show')[0].scrollHeight);
    }
    
    function showSysMessage(data) {
        $('.message-show').append(sysmessageTPL);
        var $message = $('.message-item').last();
        $($message.find('.ct-label')).text(data);
        //滚动条跳到最后;
        $('.message-show').scrollTop( $('.message-show')[0].scrollHeight);
    }
</script>
</body>
</html>